import React from 'react';
import { Menu } from 'dw-mx';
import {Link, useRouteMatch,useHistory,useLocation} from "dw-mx-router"

import './style/index.less';

export interface NavAreaProps {
    route: any;
}

function renderRoutes(routes,history) {
    return routes.filter((route) => !route.redirect && !route.hideInMenu).map((route) => {
        if (route.routes) {
            return (<Menu.SubMenu key={route.path} title={route.name}>
                {renderRoutes(route.routes,history)}
            </Menu.SubMenu>);
        } else {
            return <Menu.Item onClick={()=>{
                if(route.path.indexOf('/:workflow')>-1){
                    const params = route.path.split('/');
                    history.replace(route.path.replace(params[params.length-1],new Date().getTime()+''));
                    //return route.path.replace(params[params.length-1],new Date().getTime()+'');
                }else{
                    //return route.path;
                    history.replace(route.path);
                }}
            } key={route.path}><div style={{color:'#fff'}}>{route.name}</div></Menu.Item>;
        }
    });
}

export default function NavArea(props: NavAreaProps) {
    const { route } = props;

    const location = useLocation();
    const history = useHistory();

    return <div className={'clpc-navarea'}>
        <Menu selectedKeys={location.pathname == '/' ? ['/Home'] : [location.pathname]} key={'Menu'} mode="horizontal" className={"dw-mx-layout-clpc"}>
            {
                renderRoutes(route.routes,history)
            }
        </Menu>
    </div>;
}